<template>
	<view>
		<!-- <uni-nav-bar left-icon="left" right-width="0" left-width="10">
			<view class="search-bar" style="position: relative;">
				<uni-search-bar radius="100" placeholder="大家都在找 鱼苗养殖" clearButton="auto" cancelButton="none"
					@confirm="search">
					<uni-icons slot="searchIcon" color="#333333" size="18" type="search" />
				</uni-search-bar>
				<button class="btn-round" type="default" size="mini"
					@click="goTo('../searchList/searchList')">搜索</button>
			</view>
		</uni-nav-bar> -->
		<!-- 搜索栏 -->
		<!-- <view class="search-bar" style="position: relative;">
			<uni-search-bar radius="100" placeholder="大家都在找 鱼苗养殖" clearButton="auto" cancelButton="none"
				@confirm="search">
				<uni-icons slot="searchIcon" color="#333333" size="18" type="search" />
			</uni-search-bar>
			<button class="btn-round" type="default" size="mini"
				@click="goTo('./searchList/searchList')">搜索</button>
		</view> -->
		<search-bar ref="searchBar" :isRecommend="false" :color="color" :propkeyWord="keyWord"></search-bar>
		<!-- <view class="custom-navbar">
			<view class="left" @click="goBack()"><uni-icons type="left"></uni-icons></view>
			<view class="right">
				<uni-search-bar radius="100" placeholder="大家都在找 鱼苗养殖" clearButton="auto" cancelButton="none"
					@confirm="search">
					<uni-icons slot="searchIcon" color="#333333" size="18" type="search" />
				</uni-search-bar>
				<button class="btn-round" type="default" size="mini" @click="goTo('./searchList/searchList')">搜索</button>
			</view>
		</view> -->
		<!-- 首页款搜索栏 -->
		<!-- <view class="search-bar" style="position: relative;">
			<uni-row>
				<view class="uni-flex" style="justify-content: space-between; align-items: center;">
					<uni-col :span="20">
						<view style="position: relative;">
							<uni-search-bar radius="100" placeholder="大家都在找 鱼苗养殖" clearButton="auto" cancelButton="none"
								@confirm="search">
								<uni-icons slot="searchIcon" color="#333333" size="18" type="search" />
							</uni-search-bar>
							<button class="btn-round" type="default" size="mini"
								@click="goTo('../search/search')">搜索</button>
						</view>
					</uni-col>
					<uni-col :span="4">
						<view class="custom-weather"><text>24°</text>
							<image mode="widthFix"
								src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/home-cloudy.png"></image>
						</view>
					</uni-col>
				</view>
			</uni-row>
		</view> -->
		<view v-if="isHistory" class="history-box">
			<view class="history-title">
				<text>历史搜索</text>
				<uni-icons size="16" type="trash" color="#505863" @click="clearSearch"></uni-icons>
			</view>
			<view v-if="historyList.length > 0">
				<view class="history-content">
					<view class="history-item" @click="onClick(item.searchWord)" v-for="(item, index) in historyList" :key="index">
						{{ item.searchWord }}
					</view>
				</view>
			</view>
			<view v-else class="no-data">您还没有历史记录</view>
		</view>
		<view class="recommend-box">
			<view class="recommend-title">
				<text>猜你想搜</text>
				<uni-icons size="16" type="loop" color="#505863" @click="onchange()"></uni-icons>
			</view>
			<view class="recommend-content">
				<uni-row>
					<uni-col :span="12" v-for="(item, index) in hotKeyword" :key="index">
						<view class="recommend-item" @click="onClick(item)">{{ item }}</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryHistoryWords,
		getSearchHotKeys,
		clearHistoryWords
	} from "@/api/user.js"
	export default {
		data() {
			return {
				color: "#283241",
				isHistory: true,
				historyList: [],
				hotKeyword:[],
				keyWord:'',
				list:[],
				configId:'',
			}
		},
		onLoad:function(options) {
			console.log("classoptions",options)
			let obj = {
				configId:''
			}
			if(options.id == JSON.stringify(['7']) ){
				obj.configId = 'CREDIT_HOT_KEY'
			}
			else if(options.id ==JSON.stringify(["4", "5"])){ 
				obj.configId = 'ASSIST_HOT_KEY'
			}
			else if(options.id ==JSON.stringify(['1','2'])){
				obj.configId = 'LECTURE_HOT_KEY'
			}
			else if(options.id ==JSON.stringify(['3'])){
				obj.configId = 'MOYANG_HOT_KEY'
			}else{
				obj.configId = 'APP_HOT_KEY'
			}
			this.getSearchHotKeys({configId: obj.configId});
			this.queryHistoryWords({
				condition:null,
				pageNum:1,
				pageSize:10
			})
		},
		onPullDownRefresh(){
			this.getSearchHotKeys({configId: this.configId});
			this.queryHistoryWords({
				condition:null,
				pageNum:1,
				pageSize:10
			})
			uni.stopPullDownRefresh();
		},
		methods: {
			async getSearchHotKeys(options){
				const res = await getSearchHotKeys(options);
				if(res.success){
					this.list = res.returnObj					
					this.hotKeyword = this.getKeywordArr(this.list,10)
					console.log(this.list,this.hotKeyword)
				}
			},
			async queryHistoryWords(){
				const res = await queryHistoryWords();
				if(res.success){
					this.historyList = res.returnObj.list;
				}
			},
			async clearHistoryWords(){
				const res = await clearHistoryWords();
				if(res.success){
					this.historyList = [];
				}
			},
			goTo(e) {
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
			goBack() {
				uni.navigateBack()
			},
			clearSearch(){
				this.clearHistoryWords();
			},
			onClick(key){
				this.$refs['searchBar'].setkeyword(key);
			},
			onchange(){
				this.hotKeyword = this.getKeywordArr(this.list,10)
			},
			getKeywordArr(list, target) {
			    /**
			     * @param {number[]} list - 数据
			     * @param {number} target - 获取的条数
			     */
				if(list.length <= target){
					return list
				}
			    let hot = [];
			    for (let index = 0; index < list.length; index++) {
			        if (hot.length >= target) return hots(hot);
			        let r = Math.floor(Math.random() * list.length);
			        if (hot.indexOf(r) == -1) {
			            hot.push(r);
			        }
					
			    }
			    function hots(params) {
					console.log("hot",params)
			        return params.map(item => {return list[item] });
			    }
			},
		}
	}
</script>

<style lang="scss">
	/* 搜索栏 */
	page {
		background-color: #ffffff;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.custom-navbar {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;

		.left {
			width: 50rpx;
		}

		.right {
			flex: 1;
			position: relative;

			/deep/ .uni-searchbar__box {
				justify-content: left !important;
				flex: 1;
			}
		}
	}

	.custom-weather {
		color: #283241;
		font-size: 40rpx;
		font-family: 'DIN';
		display: flex;
		align-items: center;
		flex-wrap: nowrap;

		image {
			width: 60rpx;
			margin-left: 6rpx;
			// margin-right: 30rpx;
		}
	}

	/* 搜索栏 */
	.search-bar /deep/ .uni-searchbar__box {
		justify-content: left !important;
	}

	.search-tips {
		padding: 2px 8px;
		height: 24px;
		line-height: 24px;
		background-color: #ffffff;
		border-radius: 20px;
		color: #505863;
		font-size: 24rpx;
		margin-left: 24rpx;
	}

	.history-title,
	.recommend-title {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		padding-bottom: 0;
		font-size: 32rpx;
		//color: #283241;
		font-weight: 500;
	}

	.history-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15rpx;
	}

	.history-item {
		padding: 0 24rpx;
		background: #F0F1F1;
		border-radius: 50rpx;
		margin: 12rpx 10rpx;
		color: #505863;
		height: 28px;
		line-height: 28px;
		font-size: 24rpx;
	}

	.history-list-box {
		/* margin: 10rpx 0; */
	}

	.history-list-item {
		padding: 30rpx 0;
		margin-left: 30rpx;
		border-bottom: 1px #EEEEEE solid;
		font-size: 28rpx;
	}

	.no-data {
		text-align: center;
		color: #999;
		margin: 100rpx;
	}

	.recommend-content {
		padding: 10px 30rpx;
	}

	.recommend-item {
		font-size: 24rpx;
		line-height: 20px;
		margin-bottom: 8px;
		color: #505863;
	}
</style>